<template>
	<view class="content">
		<view class="fixed-layout">
			<!-- 搜索栏 -->
			<view class="search-bar">
				<input class="search-input" focus placeholder="点击搜索雪茄" />
			</view>
		</view>
		<!-- 浮动顶栏位置补偿 -->
		<view class="filler-block half"></view>
		<!-- 选取雪茄列表 -->
		<view class="choose-list choose-cigar-list">

			<!-- 列表树-关闭 -->
			<view class="tree-list">
				<view class="tree-title">
					<icon type="" class="fontIcon"></icon>
					常规雪茄 (2) 款
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/bolivar.webp" mode="widthFix"></image>
						<view class="corner-sign area"></view>
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔</view>
					</view>
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/bolivar.webp" mode="widthFix"></image>
						<view class="corner-sign area"></view>
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔</view>
					</view>
				</view>
			</view>

			<!-- 列表树-打开 -->
			<view class="tree-list open">
				<view class="tree-title">
					<icon type="" class="fontIcon"></icon>常规雪茄 (4) 款
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/bolivar.webp" mode="widthFix"></image>
						<view class="corner-sign area"></view>
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量</view>
					</view>
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/hupmann.webp" mode="widthFix"></image>
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔-特级金字塔</view>
					</view>
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<image src="../../static/c_cigar-logo/cuba/cohiba.webp" mode="widthFix"></image>
						<!-- <view class="corner-sign area"></view> -->
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔</view>
					</view>
				</view>
				<view class="item">
					<view class="preview-img cigar-logo">
						<!-- <image src="../../static/c_cigar-logo/cuba/diplomaticos.webp" mode="widthFix"></image> -->
					</view>
					<view class="cigar-info">
						<view class="en-name">Cohiba Piramides Extra Cohiba Piramides Extra</view>
						<view class="cn-name">2021年 桑丘西班牙地区限量-特级金字塔-特级金字塔</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 选取雪茄列表 -->
		<view class="keyword-select-list">
			<view class="choose-list choose-button-list">
				<view class="tree-list">
					<view class="tree-title">
						<icon type="" class="fontIcon icon-location"></icon>当前位置
					</view>
				</view>
				<!-- 地址列表 -->
				<view class="address-list">
					<view class="list-title">定位</view>
					<view class="list-item">
						<button class="common-btn"><icon type="" class="fontIcon icon-address"/>西安</button>
					</view>
					<view class="list-item">
						<button class="common-btn">北京</button>
						<button class="common-btn">上海</button>
						<button class="common-btn">广州</button>
						<button class="common-btn">深圳</button>
					</view>
				</view>
				<view class="tree-list open">
					<!-- 一级 -->
					<view class="tree-title">
						<icon type="" class="fontIcon"></icon>省份
					</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
				</view>
				<view class="tree-list open">
					<!-- 二级 -->
					<view class="tree-title">
						<icon type="" class="fontIcon"></icon>地区
					</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
				</view>
				<view class="tree-list">
					<!-- 二级 -->
					<view class="tree-title">
						<icon type="" class="fontIcon"></icon>街道
					</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
					<view class="item">2021年 桑丘西班牙地区限量-特级金字塔</view>
				</view>
			</view>
			<view class="keyword-select-bar">
				<button class="word">区县</button>
				<button class="word">定位</button>
				<button class="word">热门</button>
				<button>A</button>
				<button>B</button>
				<button>C</button>
				<button>D</button>
				<button>E</button>
				<button>F</button>
				<button>G</button>
				<button>H</button>
				<button>I</button>
				<button>J</button>
				<button class="word">···</button>
			</view>
		</view>
	</view>
	<!-- 浮动底栏位置补偿 -->
	<view class="filler-block"></view>
</template>

<script lang="ts">
</script>